<template>
  <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
    <div class="logo">
      <span>
        <img src="@/assets/image/avatar.jpg" alt />
      </span>
      <span class="title" v-show="!collapsed">全栈实践项目</span>
    </div>
    <!-- //遍历menuList根据权限得到对应显示的菜单 -->
    <a-menu
      :default-selected-keys="currentSelectedMenu"
      :default-open-keys="defaultOpenMenu"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
      @click="this.clickCurrentMenu"
    >
      <template v-for="item in menuLists">
        <a-menu-item v-if="!item.children" :key="item.key">
          <a-icon :type="item.icon" />
          <span>{{ item.title }}</span>
          <router-link :to="item.key"></router-link>
        </a-menu-item>
        <a-sub-menu v-else :key="item.key">
          <span slot="title">
            <a-icon :type="item.icon" />
            <span>{{item.title}}</span>
          </span>
          <a-menu-item :key="item2.key" v-for="item2 in item.children">
            <a-icon :type="item2.icon" />
            <span>{{ item2.title }}</span>
            <router-link :to="item2.key"></router-link>
          </a-menu-item>
        </a-sub-menu>
      </template>
    </a-menu>
  </a-layout-sider>
</template>

<script>
import { menuList } from "@/config/menuConfig.js";
import { mapState, mapGetters } from "vuex";
export default {
  name: "",
  data () {
    return {
      menuLists: [],
      currentSelectedMenu: [],
      defaultOpenMenu: [], //默认展开的子菜单，初始不展开
    };
  },
  computed: {
    //将菜单的展开与否的状态，从vuex中取出来
    ...mapState({ collapsed: "collapsed" }),
  },
  created () {
    console.dir(menuList)
    this.currentSelectedMenu = this.$store.state.currentSelectedMenu;
    this.defaultOpenMenu = this.$store.state.defaultOpenMenu;
    this.filterMenuList(menuList)
  },
  mounted () {

  },
  methods: {
    //点击当前菜单将路径保存进去，以便刷新的时候，选中的菜单不改变
    clickCurrentMenu (currentInfo) {
      console.log(currentInfo);
      this.$store.commit("current_select_menu", currentInfo.keyPath);
      this.currentSelectedMenu = this.$store.state.currentSelectedMenu;
      this.$store.commit("default_open_menu", currentInfo.keyPath);
      this.defaultOpenMenu = this.$store.state.defaultOpenMenu;
    },
    //判断当前登录用户对item是否有权限
    hasAuth (item) {
      const { key, isPublic } = item
      const menus = this.$store.state.user.role.menus
      if (isPublic || menus.indexOf(key) !== -1) { //公开的或者在权限数组中可以找到当前item.key
        return true
      } else if (item.children) {  //有子菜单
        return !!item.children.find(child => menus.indexOf(child.key) !== -1)
      }
      return false
    },
    //根据hasAuth过滤menuList
    filterMenuList (menuList) {
      for (let item of menuList) {
        if (this.hasAuth(item)) { //如果有当前菜单权限，将其放入menuLists中
          if (!item.children) {  //如果没有children,说明只有主菜单，有权限就直接添加进去
            this.menuLists.push(item)
          } else if (item.children) {   //如果有children，说明有子菜单，此时不仅需要将主菜单加入进去，还需要遍历子菜单，将有权限的子菜单加入进去
            //对此itemd的children进行过滤处理
            for (let i = 0; i < item.children.length; i++) {
              if (this.$store.state.user.role.menus.indexOf(item.children[i].key) == -1) {  //如果此项cItem在没有权限，丢弃
                const spliceArr = item.children.splice(i, 1)  //splice方法行不通，返回的是被删除的元素，而我们要的是删除该元素之后的数组
                i--
              }
            }
            this.menuLists.push(item)
          }
        }
      }
    }
  },
  components: {}
};
</script>

<style scoped>
.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.logo span img {
  width: 28px;
  height: 28px;
  margin-top: 2px;
  margin-left: 10px;
}
.logo .title {
  margin-left: 15px;
  font-size: 18px;
  color: #fff;
  vertical-align: middle;
}
</style>
